@import url('../../rate-star.css');

.page {
    background    : #F8F8F8;
}

.state {
    width           : 100%;
    height          : 80px;
    text-align      : center;
    background-color: #FFFFFF;
    padding-top     : 25px;
    margin-top      : 24px;
}

.divider {
    width           : 670px;
    height          : 1px;
    background-color: #E4E2E1;
    margin-left     : 40px;
    margin-right    : 40px;
}

.store {
    background-color: #FFFFFF;
    padding         : 32px 40px;

    .title {
        display        : flex;
        flex-direction : row;
        justify-content: space-between;

        .name {
            font-size  : 32px;
            line-height: 45px;
            font-weight: 600;
            color      : #373737;
        }

        .distance {
            margin-top : 6px;
            font-size  : 24px;
            line-height: 33px;
            color      : #999999;
        }
    }

    .address {
        display       : flex;
        flex-direction: row;
        margin-top    : 12px;

        .icon-left {
            width     : 24px;
            height    : 24px;
            margin-top: 12px;
        }

        .text {
            margin-left: 8px;
            width      : 485px;
            font-size  : 24px;
            line-height: 40px;
            color      : #373737;
        }

        .map {
            margin-left: 19px;
            width      : 48px;
            height     : 48px;
        }

        .phone {
            margin-left: 40px;
            width      : 48px;
            height     : 48px;
        }
    }
}

.icon-appointment {
    width         : 38px;
    height        : 36px;
    vertical-align: middle;
}

.service-name {
    font-size     : 32px;
    line-height   : 45px;
    color         : #504037;
    font-weight   : 600;
    margin-left   : 12px;
    vertical-align: middle;
}

.box-service {
    margin-top      : 24px;
    background-color: #FFFFFF;
    padding         : 32px 40px;

    .item-service {
        margin-top    : 32px;
        margin-bottom : 10px;
        display       : flex;
        flex-direction: row;
        position      : relative;

        .img {
            width : 88px;
            height: 88px;
        }

        .name {
            margin-left   : 20px;
            font-size     : 28px;
            vertical-align: text-top;
            color         : #373737;
        }

    }
}

.item-info {
    padding  : 20px 0; //实现垂直居中
    width    : 100%;
    color    : #373737;
    overflow : auto; //防止float的子元素高度大于父元素时溢出
    font-size: 28px;

    .left-title {
        float: left;
    }

    .right-value {
        float: right;
    }
}

.box-order {
    margin-top      : 24px;
    background-color: #FFFFFF;
    padding         : 32px 40px;

}

.box-evaluate {
    margin-top      : 24px;
    background-color: #FFFFFF;
    padding         : 32px 30px;
    position        : relative;
    vertical-align  : middle;
    padding-bottom: 48px;

    .evaluate-base-info {
        margin-top  : 20px;
        position    : relative;
        margin-right: 10px;

        .avatar {
            width        : 68px;
            height       : 68px;
            border-radius: 68px;
        }

        .user-info {
            width      : 550px;
            height     : 88px;
            margin-left: 20px;
            color      : #373737;
            font-size  : 28px;
            display    : inline-block;
            text-align : left;
            position   : relative;

            .name {
                width   : 100%;
                position: absolute;
                top     : 5px;
                left    : 0px
            }

            .evaluate-time {
                position: absolute;
                height  : 88px;
                top     : 5px;
                right   : 0px;
                display : inline-block;
            }

            .row-score {
                position      : absolute;
                height        : 25px;
                bottom        : 5px;
                left          : -5px;
                width         : 100%;
                display       : flex;
                flex-direction: row;
                text-align    : center;

                .text {
                    margin-top : 8px;
                    margin-left: 28px;
                    font-size  : 24px;
                    line-height: 33px;
                    color      : #373737;
                }

                .text2 {
                    font-size  : 24px;
                    line-height: 33px;
                    color      : #999999;
                }
            }


        }
    }

    .evaluate-content {
        margin-right: 10px;
        margin-top  : 20px;
        font-size   : 28px;
        line-height : 40px;
    }

    .evaluate-img {
        margin-right   : 10px;
        margin-top     : 20px;
        display        : flex;
        flex-wrap      : wrap;
        box-sizing     : border-box;
        justify-content: flex-start;

        .evaluate-img-item {
            width        : 215px;
            height       : 215px;
            margin-right : 10px;
            margin-bottom: 10px;
        }
    }

    .shop-reply {
        margin-right : 10px;
        position     : relative;
        font-size    : 24px;
        line-height  : 33px;
        margin-top   : 20px;
        margin-bottom: 33px;

        .bg {
            height: 164px;
            width : 670px;
        }

        .reply-title {
            color   : #373737;
            display : block;
            position: absolute;
            top     : 37px;
            padding : 0 20px;
        }

        .reply-content {
            color   : #08D4D2;
            display : block;
            position: absolute;
            top     : 47px;
            padding : 0 20px;
        }
    }
}

.btn-evaluate {
    position: relative;
    margin  : 48px auto;
    font-size       : 28px;
    width           : 600px;
    border-radius   : 30px;
    background-color: #373737;
    text-align      : center;
    color           : white;
    padding         : 20px 0;
}